<template>
  <div class="wrap">
    <div class="head">
      <a class="back" @click="doGoback">
        <img src="../../../assets/1first/5-8搜索结果/back.png" alt="">
      </a>
      <div>面部护理</div>
    </div>
    <ul class="shaixuanUl">
      <li class="shaixuanLi">
          <div>销量</div>
      </li>
      <li class="shaixuanLi">
          <div>最新</div>
      </li>
      <li class="shaixuanLi">
          <div>价格</div>
      </li>
      <li class="shaixuanLi">
          <div @click="doShowList">筛选</div>
      </li>
    </ul>
    <div class="check clearfix" v-if="isCheckBox">
      <div class="fl checkLeft" v-for="(item, index) in aCheck" @click="doDel(index)">
        {{item}}
      </div>
      <div class="fr checkRight" @click="doQingkong">清空</div>
    </div>
    <div class="bottom">
      <div class="shangpin" v-for="item in 4">
        <div class="imgDiv">
          <img src="../../../assets/2class/chuncai.jpg" alt="">
        </div>
        <div class="descDiv">
          <h4 class="title">焕彩萃璨花蕊唇彩4.8g</h4>
          <p class="desc">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
          <div class="kuaidi">
            <img src="../../../assets/2class/japan.jpg" alt="" class="riben">
            <img src="../../../assets/2class/feiji.jpg" alt="" class="feiji">
            <span class="zhiyou">海外直邮</span>
            <span class="fr price">￥166.06</span>
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div class="datu">
        <img src="../../../assets/2class/datu.jpg" alt="">
      </div>
    </div>
    <div class="mask" v-if="isShow" @click="doShow"></div>
    <div class="fenlei" v-if="isShow">
      <div class="fahuodi">
        <img src="../../../assets/2class/fahuodi.jpg" alt=""><span>发货地</span>
        <br class="clear">
        <div class="clearfix">
          <div class="fl guojia" v-for="(item, index) in aGuojia" @click="doCheckGuojia(index)" :class="{'xuanzhong': item.isDuihao}">
            <img src="../../../assets/2class/duihao1.png" alt="" class="duihaoNone" :class="{'duihaoBlock': item.isDuihao}">
            {{item.guojia}}
          </div>
        </div>
      </div>
      <div class="shangpinleixing">
        <img src="../../../assets/2class/shangpinleixing.jpg" alt=""><span>商品类型</span>
        <br class="clear">
        <div class="clearfix">
          <div class="fl guojia" v-for="(item,index) in aLeixing" @click="doCheckLeixing(index)" :class="{'xuanzhong': item.isDuihao}">
            <img src="../../../assets/2class/duihao1.png" alt="" class="duihaoNone" :class="{'duihaoBlock': item.isDuihao}">
            {{item.leixing}}
          </div>
        </div>
      </div>
      <div class="erjifenlei">
        <img src="../../../assets/2class/fenlei1.jpg" alt=""><span>分类</span>
        <br class="clear">
        <div class="clearfix">
          <div class="fl guojia" v-for="(item, index) in aFenlei" @click="doCheckFenlei(index)" :class="{'xuanzhong': item.isDuihao}">
            <img src="../../../assets/2class/duihao1.png" alt="" class="duihaoNone" :class="{'duihaoBlock': item.isDuihao}">
            {{item.fenlei}}
          </div>
          <div class="fl more">
            更多分类 >
          </div>
        </div>
      </div>
      <div class="btn">
        <div class="chongzhi" @click="doChongzhi">重置</div>
        <div class="queding" @click="doQueding">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: false,
        aGuojia: [
          {
            guojia: '日本',
            isDuihao: false
          },
          {
            guojia: '美国',
            isDuihao: false
          },
          {
            guojia: '中国',
            isDuihao: false
          },
          {
            guojia: '澳大利亚',
            isDuihao: false
          },
          {
            guojia: '英国',
            isDuihao: false
          }
        ],
        aLeixing: [
          {
            leixing: '促销商品',
            isDuihao: false
          },
          {
            leixing: '首发商品',
            isDuihao: false
          }
        ],
        aFenlei: [
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
          {
            fenlei: '洁面护理',
            isDuihao: false
          },
        ],
        aCheck: [],
        aCheckNew: [],
        isCheckBox: false
      }
    },
    methods: {
      doGoback() {
        this.$router.go(-1)
      },
      doShow() {
        this.isShow = false
      },
      doShowList() {
        this.isShow = true
        this.doChongzhi()
      },
      doCheckGuojia(index) {
        for (let i = 0; i < this.aGuojia.length; i++) {
          this.aGuojia[i].isDuihao = false
        }
        this.aGuojia[index].isDuihao = !this.aGuojia[index].isDuihao
        this.aCheckNew.push(this.aGuojia[index].guojia)
        console.log(this.aCheckNew)
      },
      doCheckLeixing(index) {
        for (let i = 0; i < this.aLeixing.length; i++) {
          this.aLeixing[i].isDuihao = false
        }
        this.aLeixing[index].isDuihao = !this.aLeixing[index].isDuihao
        this.aCheckNew.push(this.aLeixing[index].leixing)
        console.log(this.aCheckNew)
      },
      doCheckFenlei(index) {
        for (let i = 0; i < this.aFenlei.length; i++) {
          this.aFenlei[i].isDuihao = false
        }
        this.aFenlei[index].isDuihao = !this.aFenlei[index].isDuihao
        this.aCheckNew.push(this.aFenlei[index].fenlei)
        console.log(this.aCheckNew)
      },
      doChongzhi() {
        for (let i = 0; i < this.aGuojia.length; i++) {
          this.aGuojia[i].isDuihao = false
        }
        for (let i = 0; i < this.aLeixing.length; i++) {
          this.aLeixing[i].isDuihao = false
        }
        for (let i = 0; i < this.aFenlei.length; i++) {
          this.aFenlei[i].isDuihao = false
        }
        this.aCheckNew.splice(0)
        this.aCheck = this.aCheckNew
        console.log(this.aCheck)
      },
      doQueding() {
        this.aCheck = this.aCheckNew
        console.log(this.aCheck)
        this.isShow = false
        this.isCheckBox = true
      },
      doQingkong() {
        this.aCheck.splice(0)
        if (this.aCheck.length === 0) {
          this.isCheckBox = false
        }
      },
      doDel(i) {
        this.aCheck.splice(i, 1)
        if (this.aCheck.length === 0) {
          this.isCheckBox = false
        }
      }
    }
  }
</script>
<style scoped>
  .head{
    position: relative;
    text-align: center;
    background: #e53e42;
    color: #fff;
    line-height: 2.13rem;
    font-size: 0.8rem;
  }
  .back{
    position: absolute;
    left: 0;
    margin-left: 0.44rem;
  }
  .back img{
    width: 0.51rem;
  }
  .shaixuanUl{
    display: flex;
    border-bottom: 1px solid #ccc;
  }
  .shaixuanLi{
    flex: 1;
    text-align: center;
    font-size: 0.62rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.78rem;
    letter-spacing: 0px;
    color: #4d4d4d;
  }
  .router-link-active{
    color: #e53e42;
  }
  .shangpin {
    background: #fff;
    padding: 0.44rem;
    display: flex;
    margin-bottom: 0.44rem;
  }
  .imgDiv {
    width: 4.89rem;
    box-sizing: border-box;
    padding: 0 1.67rem;
    flex: none;
  }
  .imgDiv img{
    width: 1.53rem;
  }
  .descDiv{
    flex: 1;
  }
  .title{
    font-family: SimHei;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.67rem;
    color: #333333;
    margin-bottom: 0.44rem;
  }
  .desc{
    font-family: SimHei;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.8rem;
    color: #4d4d4d;
  }
  .riben{
    width: 0.67rem;
    margin-right: 0.44rem;
  }
  .feiji{
    width: 0.76rem;
    margin-right: 0.22rem;
  }
  .zhiyou{
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.67rem;
    color: #666666;
  }
  .price{
    font-family: SimHei;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.68rem;
    color: #e53e42;
  }
  .datu img{
    width: 100%;
  }
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.4;
  }
  .fenlei{
    background: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 12.44rem;
  }
  .fahuodi, .shangpinleixing, .erjifenlei{
    padding: 0.44rem;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
  }
  .fahuodi img, .shangpinleixing img, .erjifenlei img {
    width: 0.76rem;
    float: left;
    margin-right: 0.33rem;
  }
  .fahuodi span, .shangpinleixing span, .erjifenlei span {
    float: left;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.8rem;
    color: #4d4d4d;
  }
  .guojia{
    width: 3.5rem;
    height: 1.77rem;
    line-height: 1.77rem;
    text-align: center;
    background-color: #f2f2f2;
    border-radius: 0.22rem;
    margin: 0.16rem;
    font-size: 0.62rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
    position: relative;
  }
  .more{
    width: 3.5rem;
    height: 1.77rem;
    line-height: 1.77rem;
    text-align: center;
    background-color: #fff;
    border-radius: 0.22rem;
    margin: 0.16rem;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #808080;
  }
  .btn{
    display: flex;
    height: 2.22rem;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .btn div{
    flex: 1;
    line-height: 2.22rem;
    text-align: center;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
  }
  .chongzhi{
    background-color: #f2f2f2;
    color: #4d4d4d;
  }
  .queding{
    background-color: #e53e42;
    color: #fff;
  }
  .erjifenlei{
    margin-bottom: 2.22rem;
  }
  .duihaoNone{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  .duihaoBlock{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
  }
  .xuanzhong{
    background-color: #ffd3d3;
    color: #e53e42;
  }
  .check{
    padding: 0.4rem 0.44rem;
    background: #fff;
    border-bottom: 1px solid #ccc;
  }
  .checkLeft{
    line-height: 1.33rem;
    background-color: #999999;
    border-radius: 0.22rem;
    width: 3.56rem;
    text-align: center;
    margin-right: 0.44rem;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #ffffff;
  }
  .checkRight{
    width: 2.22rem;
    text-align: center;
    line-height: 1.33rem;
    background-color: #ffffff;
    border-radius: 0.22rem;
    border: solid 1px #4d4d4d;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }
</style>
